<template>
  <div class="app-container">
    <!-- <el-tag>查询条件</el-tag> -->
    <div>
      <h4 style="margin:0 0 1.25rem 0">
        <el-tag type="info">查询条件</el-tag>
      </h4>
      <el-form ref="form" :model="form" label-width="6.25rem" style="display:flex;flex-wrap:wrap;">
        <el-form-item label="卡号">
          <el-input v-model="form.card_id" placeholder="请输入卡号" clearable></el-input>
        </el-form-item>
        <el-form-item label="卡状态">
          <template slot-scope="scope">
            <el-select v-model="form.card_state" clearable>
              <el-option v-for="item in cardStatusList" :key="item.dict_id" :label="item.dict_value" :value="item.dict_id">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="车牌号">
          <el-input v-model="form.plate_no" placeholder="请输入车牌号" clearable></el-input>
        </el-form-item>
        <el-form-item label="用户号">
          <el-input v-model="form.user_id" placeholder="请输入用户号" clearable></el-input>
        </el-form-item>
        <el-form-item label="用户姓名">
          <el-input v-model="form.user_name" placeholder="请输入用户姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="账单时间">
          <el-date-picker v-model="form.bill_time" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" clearable></el-date-picker>
        </el-form-item>
      </el-form>
      <div class="bfc">
        <el-button class="btn" @click="reset" type="primary">重 置</el-button>
        <el-button class="btn" @click="search" type="primary">查 询</el-button>
        <el-button class="btn" @click="exportForm" type="primary">导 出</el-button>
      </div>
    </div>
    <div>
      <h4 style="margin:0 0 1.25rem 0">
        <el-tag type="info">基本列表</el-tag>
      </h4>
      <el-table :data="baseList" border style="width: 100%" tooltip-effect="dark">
        <el-table-column type="index" :index="indexMethod" label="序号" min-width="80">
        </el-table-column>
        <el-table-column prop="user_id" label="用户号" min-width="150" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="card_id" label="卡号" min-width="150" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="card_status" label="卡状态" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="user_name" label="用户姓名" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" min-width="120" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="plate_no" label="车牌号" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="account" label="未还款账单" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="count" label="账单数量" min-width="100">
        </el-table-column>
        <el-table-column prop="start_date" label="账单开始时间" min-width="150" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="end_date" label="账单结束时间" min-width="150" show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination class="page-num" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="perPageNum" layout="total, sizes, prev, pager, next, jumper" :total="totalListNum">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import { getList, exportList } from '@/api/unpaidBillReport'
  import { queryDict } from '@/api/queryDict'
  export default {
    data() {
      return {
        cardStatusList: '',
        listLoading: '',
        currentPage: 1,
        downloadUrl: '',
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        baseList: [],
        perPageNum: 10,
        totalListNum: 0,
        form: {
          sys_bill_id: '',
          plat_id: '',
        },
        Options: [{
          value: '1',
          label: '支付宝'
        }, {
          value: '2',
          label: '微信'
        }]
      }
    },
    created() {
      this.queryCardStatus()
      this.fetchData()
    },
    methods: {
      formatPlatId(row, column) {
        return row.plat_id === '1' ? '支付宝' : row.plat_id === '2' ? '微信' : '未知'
      },
      queryCardStatus() {
        const params = {
          'group_id': 'AFTER_SALE_STATUS',
          'status': '1'
        }
        queryDict(params).then(res => {
          this.cardStatusList = res.data ? res.data : []
        }).catch(er => { })
      },
      reset() {
        this.form = {}
        this.currentPage = 1
        this.perPageNum = 10
        this.fetchData()
      },
      praseDate(date) {
        const year = date.getFullYear()
        const month = date.getMonth() + 1
        const day = date.getDate()
        return year + '-' + month + '-' + day
      },
      search() {
        this.currentPage = 1
        this.fetchData()
      },
      exportForm() {
        const params = {
          'card_id': this.form.card_id,
          'card_state': this.form.card_state,
          'start_date': this.form.bill_time === undefined ? '':this.form.bill_time === null ? '':this.form.bill_time[0] === '' ? '' : this.praseDate(this.form.bill_time[0]),
          'end_date': this.form.bill_time === undefined ? '':this.form.bill_time === null ? '':this.form.bill_time[1] === '' ? '' : this.praseDate(this.form.bill_time[1]),
          'plate_no': this.form.plate_no,
          'user_id': this.form.user_id,
          'user_name': this.form.user_name
        }
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.7)'
        })
        exportList(params).then(res => {
          const data = res.data
          if(data === null){
            this.$message.error(res.message)
          } else {
            this.downloadUrl = data.download_url
            window.location.href = this.downloadUrl
          }
        }).catch(er => {
          this.$message.error('导出失败，请重试！')
        })
        loading.close()
      },
      indexMethod(index) {
        return index + (this.currentPage - 1) * this.perPageNum + 1
      },
      handleSizeChange(val) {
        this.perPageNum = val
        this.currentPage = 1
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.fetchData()
      },
      fetchData() {
        const params = {
          'page': this.currentPage,
          'per_num': this.perPageNum,
          'card_id': this.form.card_id,
          'card_state': this.form.card_state,
          'plate_no': this.form.plate_no,
          'user_id': this.form.user_id,
          'user_name': this.form.user_name,
          'start_date': this.form.bill_time === undefined ? '':this.form.bill_time === null ? '':this.form.bill_time[0] === '' ? '' : this.praseDate(this.form.bill_time[0]),
          'end_date': this.form.bill_time === undefined ? '':this.form.bill_time === null ? '':this.form.bill_time[1] === '' ? '' : this.praseDate(this.form.bill_time[1])
        }
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.7)'
        })
        getList(params).then(res => {
          const data = res.data
          this.baseList = data ? data.result_list : null
          this.totalListNum = data ? data.total : 0
        }).catch(er => { })
        loading.close()
      }
    }
  }
</script>

<style  lang="scss" scoped>
  .page-num {
    float: right;
  }
  .pw22 {
    width: 22%;
  }
  .btn {
    float: right;
    margin: 0 0.9rem;
  }
  .ml20 {
    margin-left: 1.25rem;
  }
  .bfc {
    overflow: hidden;
  }
  .flex {
    display: flex;
    display: -webkit-flex;
    align-items: center;
  }
  .w100 {
    display: block;
    width: 6.2rem;
    box-sizing: border-box;
    overflow: hidden;
  }
  .aic {
    align-items: center;
  }
  .jcsa {
    justify-content: flex-start;
  }

</style>
